<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>计算属性的用法</title>
  <style type="text/css">
    table.gridtable {
      font-family: verdana, arial, sans-serif;
      font-size: 11px;
      color: #333333;
      border-width: 1px;
      border-color: #666666;
      border-collapse: collapse;
    }

    table.gridtable th {
      border-width: 1px;
      padding: 8px;
      border-style: solid;
      border-color: #666666;
      background-color: #dedede;
    }

    table.gridtable td {
      border-width: 1px;
      padding: 8px;
      border-style: solid;
      border-color: #666666;
      background-color: #ffffff;
    }
  </style>
</head>

<body>
  <div id="app">
    <table class="gridtable">
      <tr>
        <th>学科</th>
        <th>分数</th>
      </tr>
      <tr>
        <td>语文</td>
        <td><input type="text" name="" id="" v-model="chinese"/></td>
      </tr>
      <tr>
        <td>数学</td>
        <td><input type="text" name="" id="" v-model="math"/></td>
      </tr>
      <tr>
        <td>英语</td>
        <td><input type="text" name="" id="" v-model="english"/></td>
      </tr>
      <tr>
        <td>总分</td>
        <td><input type="text" name="" id="" :value="sum" @input="updateSum"/></td>
      </tr>
      <tr>
        <td>平均分</td>
        <td><input type="text" name="" id="" :value="average" @input="updateAverage"/></td>
      </tr>
    </table>
  </div>
  <script src="../js/vue.js"></script>
  <script type="text/javascript">
    new Vue({
      el: '#app',
      data: {
        chinese: 90,
        math: 80,
        english: 90
      },
      computed: {
        sum: {
          get() {
            let chineseValue = parseInt(this.chinese);
            let mathValue = parseInt(this.math);
            let englishValue = parseInt(this.english);
            return chineseValue + mathValue + englishValue;
          },
          set(newValue) {
            // 在这里根据新输入的总分重新计算各科成绩
            let average = Math.round(newValue / 3);
            this.chinese = average;
            this.math = average;
            this.english = average;
          }
        },
        average: {
          get() {
            return Math.round(this.sum / 3);
          },
          set(newValue) {
            // 在这里根据新输入的平均分重新计算总分和各科成绩
            let sum = newValue * 3;
            this.sum = sum;
            this.chinese = sum / 3;
            this.math = sum / 3;
            this.english = sum / 3;
          }
        }
      },
      methods: {
        updateSum(event) {
          this.sum = parseInt(event.target.value);
        },
        updateAverage(event) {
          this.average = parseInt(event.target.value);
        }
      }
    })
  </script>

</body>

</html>